<template>
    <div class="shopcar-wrap">
        <div class="shopcar-container">
            <div class="shopcar-detail-pannel">
                <div class="shop-detail-wrap" @click="toggleFade">
                <div class="shopcar-wrap">
                    <div class="shopcar" :class="{'active':totalCount>0}"><i
                            class="icon-shopping_cart icon" :class="{'active':totalCount>0}"></i>
                        <div class="shopcar-count" v-show="totalCount>0">{{totalCount}}</div>
                    </div>
                </div>
                <div class="total-consume" :class="{'active':totalPrice>0}">￥{{totalPrice}}</div>
                </div>
                <div class="consume-detail">另需配送费￥{{deliveryPrice}}元</div>
            </div>
            <div class="shopcar-btn" :class="btnClass">{{btnText}}</div>
            <transition name="slideup">
                <div class="shopcar-buy-list" v-show="changeFade">
                    <h2 class="buy-list-title">
                        <span class="title-name">购物车</span>
                        <span class="clear" @click="clearBuy">清空</span>
                    </h2>
                    <div class="buy-list-wraper" ref="buyList">
                        <ul class="buy-list-content">
                            <li class="buy-list-item border-1px-bottom" v-for="food in foodList">
                                <h3 class="food-title">{{food.name}}</h3>
                                <div class="right-area">
                                    <div class="food-price">￥{{food.count*food.price}}</div>
                                    <div class="control-area">
                                        <v-carcontrol :food="food" @des="refreshScroll"></v-carcontrol>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </transition>
        </div>
        <div v-for="ball in balls">
            <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
                <div class="ball-outter" v-show="ball.show">
                    <div class="ball-inner inner-hook"></div>
                </div>
            </transition>
        </div>
        <div class="mask" v-show="changeFade" @click="toggleFade"></div>
    </div>
</template>
<script type="es6">
    import carcontrol from "../carcontrol/carcontrol"
    import BScroll from 'better-scroll'
    export default {
        props: {
            deliveryPrice: {
                type: Number
            },
            minPrice: {
                type: Number
            },
            foodList: {
                type: Array,
                default () {
                    return []
                }
            }
        },
        data () {
            return {
                balls: [{
                    show: false
                }, {
                    show: false
                }, {
                    show: false
                }, {
                    show: false
                }, {
                    show: false
                }],
                isDrowingBall: [],
                //表示是否是折叠状态
                fold: true,
                actionAni:true
            }
        },
        computed: {
            totalPrice () {
                let total = 0
                this.foodList.forEach((good)=> {
                    total += good.price * good.count
                })
                return total
            },
            totalCount () {
                let count = 0
                this.foodList.forEach((good)=> {
                    count += good.count
                })
                return count
            },
            btnText () {
                if (this.totalPrice === 0) {
                    return `￥${this.minPrice}元起送`
                } else if (this.totalPrice < this.minPrice) {
                    return `还差${this.minPrice - this.totalPrice}元起送`
                } else if (this.totalPrice >= this.minPrice) {
                    return '去结算'
                }
            },
            btnClass(){
                if (this.totalPrice < this.minPrice) {
                    return "normal"
                } else if (this.totalPrice >= this.minPrice) {
                    return "active"
                }
            },
            changeFade(){
                if(this.totalCount <= 0){
                     this.fold = true
                }
                if(this.fold){
                    return false
                }else{
                    return true
                }
            }
        },
        methods: {
            drop(el) {
                for (let i = 0; i < this.balls.length; i++) {
                    let ball = this.balls[i];
                    if (!ball.show) {
                        ball.show = true;
                        ball.el = el;
                        this.isDrowingBall.push(ball);
                        return;
                    }
                }
            },
            beforeDrop(el) {
                let count = this.balls.length;
                while (count--) {
                    let ball = this.balls[count];
                    if (ball.show) {
                        let rect = ball.el.getBoundingClientRect();

                        let x = rect.left - 40;
                        let y = -(window.innerHeight - rect.top - 28);
                        el.style.display = '';
                        el.style.webkitTransform = `translate3d(0,${y}px,0)`;
                        el.style.transform = `translate3d(0,${y}px,0)`;
                        let inner = el.getElementsByClassName('inner-hook')[0];
                        inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
                        inner.style.transform = `translate3d(${x}px,0,0)`;
                    }
                }
            },
            dropping(el, done) {
                /* eslint-disable no-unused-vars */
                let rf = el.offsetHeight;
                this.$nextTick(() => {
                    el.style.webkitTransform = 'translate3d(0,0,0)';
                    el.style.transform = 'translate3d(0,0,0)';
                    let inner = el.getElementsByClassName('inner-hook')[0];
                    inner.style.webkitTransform = 'translate3d(0,0,0)';
                    inner.style.transform = 'translate3d(0,0,0)';
                    el.addEventListener('transitionend', done);
                });
            },
            afterDrop(el) {
                let ball = this.isDrowingBall.shift();
                if (ball) {
                    ball.show = false;
                    el.style.display = 'none';
                }
            },
            toggleFade() {
                if (this.totalCount > 0) {
                    this.fold = !this.fold
                    if (this.fold === false) {
                        this.$nextTick(()=> {
                            if (!this.buyScroll) {
                                this.buyScroll = new BScroll(this.$refs.buyList, {
                                    click: true
                                })
                            } else {
                                this.buyScroll.refresh()
                            }
                        })
                    }
                } else {
                    this.fold = true
                }
            },
            refreshScroll(){
                if (this.fold === false) {
                    this.$nextTick(()=> {
                        if (!this.buyScroll) {
                            this.buyScroll = new BScroll(this.$refs.buyList, {
                                click: true
                            })
                        } else {
                            this.buyScroll.refresh()
                        }
                    })
                }
            },
            clearBuy(){
                this.foodList.forEach((food)=>{
                    food.count = 0
                    this.fold = true
                })
            }
        },
        components: {
            "v-carcontrol": carcontrol
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    @import "../../../public/stylesheet/mixin.less";

    .shopcar-container {
        position: fixed;
        display: flex;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 46px;
        z-index:1001;
        .shopcar-detail-pannel {
            display: flex;
            flex: 1;
            font-size: 0;
            height: 46px;
            background: #141d27;
            .shop-detail-wrap{
                display:flex;
                height:46px;
                .shopcar-wrap {
                    display: flex;
                    position: relative;
                    top: -12px;
                    width: 56px;
                    height: 56px;
                    margin-left: 12px;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    background: #141d27;
                    .shopcar {
                        display: flex;
                        position: relative;
                        width: 44px;
                        height: 44px;
                        align-items: center;
                        justify-content: center;
                        border-radius: 50%;
                        background: #2b343c;
                        &.active {
                            background: #00a0dc;
                        }
                        .icon {
                            font-size: 24px;
                            color: #80858a;
                            &.active {
                                color: #ffffff;
                            }
                        }
                        .shopcar-count {
                            position: absolute;
                            right: -8px;
                            top: -6px;
                            width: 24px;
                            height: 16px;
                            line-height: 18px;
                            text-align: center;
                            border-radius: 16px;
                            background-color: rgb(240, 20, 20);
                            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
                            font-weight: 700;
                            color: #fff;
                            font-size: 9px;
                        }
                    }
                }
                .total-consume {
                    padding-right: 12px;
                    margin-left: 8px;
                    margin-right: 12px;
                    font-size: 16px;
                    height: 24px;
                    line-height: 24px;
                    align-self: center;
                    font-weight: 700;
                    color: #919396;
                    border-right: 1px solid #2b343c;
                    &.active {
                        color: #fff;
                    }
                }
            }

            .consume-detail {
                font-size: 10px;
                align-self: center;
                font-weight: 700;
                color: #919396;
            }

        }
        .shopcar-btn {
            flex: 0 0 105px;
            width: 105px;
            height: 46px;
            line-height: 46px;
            font-size: 12px;
            font-weight: 700;
            text-align: center;
            background: #2b333b;
            color: #979a9c;
            &.normal {
                color: #979a9c;
                background: #2b333b;
            }
            &.active {
                background: #00b43c;
                color: #fff;
            }
        }
        .shopcar-buy-list {
            position: absolute;
            box-sizing: border-box;
            top: 0;
            left: 0;
            width: 100%;
            z-index: -1;
            border-bottom: 1px solid rgba(7, 17, 27, 0.1);
            transform: translate3d(0, -99%, 0);
            transition: all 0.3s linear;
            &.slideup-enter-active, &.slideup-leave {
                transform: translate3d(0, -99%, 0);
            }
            &.slideup-enter, &.slideup-leave-active {
                transform: translate3d(0, 0, 0);
            }
            .buy-list-title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 40px;
                padding: 0 18px;
                background: #f3f5f7;
                .title-name {
                    font-size: 14px;
                    font-weight: 200;
                    color: rgb(7, 17, 27);
                }
                .clear {
                    font-size: 14px;
                    color: rgb(0, 160, 220)
                }
            }
            .buy-list-wraper{
                padding: 0 18px;
                background: #fff;
                max-height: 220px;
                overflow: hidden;
                .buy-list-content {
                    .buy-list-item {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        height: 48px;
                        .border-1px-bottom(rgba(7, 17, 27, 0.1));
                        &:last-child {
                            .border-none
                        }
                        .food-title {
                            font-size: 14px;
                            color: rgb(7, 17, 27);
                        }
                        .right-area {
                            display: flex;
                            align-items: center;
                            .food-price {
                                font-size: 12px;
                                font-weight: 700;
                                color: rgb(240, 20, 20);
                                margin-right: 12px;
                            }
                        }
                    }
                }
            }

        }
    }

    .ball-outter {
        position: fixed;
        left: 40px;
        bottom: 28px;
        z-index: 1001;
        transition: all 0.3s cubic-bezier(0.49, -0.29, 0.75, 0.41);
        .ball-inner {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgb(0, 160, 220);
            transition: all 0.3s;
        }
    }

    .mask{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        top:0;
        background: rgba(7, 17, 27, 0.8);
        z-index:104;
    }

</style>